<template>
	<view class="main">
		<scroll-view @scrolltolower="search" scroll-y show-scrollbar="false" class="greet-scroll-view">
			<view class="row-box bg-white">
				<view class="item">
					<view class="content">{{row.content}}</view>
					<view class="footer d-flex flex-row justify-content-between align-content-center align-items-center">
						<view class="d-flex flex-row lable">
							<view class="category botton m-r-20">{{row.category_title||'-'}}</view>
							<view v-if="row.row.copy_count>10" class="quanity botton">{{row.row.copy_count||0}} 热度</view>
						</view>
						<view class="d-flex flex-row">
							<view class="share botton d-flex flex-row justify-content-between align-items-center m-r-30">
								<image class="img-25" src="../../static/share-white.svg"></image>
								<button class="uni-button" open-type="share">
									<view class="font-color-white title">分享</view>
								</button>
							</view>
							<view @click="copy(row.content)" class="copy botton d-flex flex-row justify-content-between align-items-center">
								<image class="img-25" src="../../static/copy.svg"></image>
								<view class="font-color-white title">点击复制</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="d-flex flex-column justify-content-center align-content-center align-items-center p-30">
				更多 ⌈{{row.category_title}}⌋ 祝福语
			</view>
			
			<!-- 显示祝福语 -->
			<view class="list-box">
				<view v-for="(item,index) in greets" :key="item.id" class="item">
					<view class="content">{{item.content}}</view>
					<view class="footer d-flex flex-row justify-content-between align-content-center align-items-center">
						<view class="quanity">
							<text v-if="row.copy_count>10">{{row.copy_count||0}} 热度</text>
						</view>
						<view @click="copy" class="copy d-flex flex-row justify-content-between align-items-center">
							<image class="img-25" src="../../static/copy.svg"></image>
							<view @click="copy(item.content)" class="font-color-white title">点击复制</view>
						</view>
					</view>
				</view>
				<view v-if="ending" class="d-flex align-content-center justify-content-center p-40 font-color-gray font-size-26">
					暂无更多了😊，欢迎您来信建议(首页顶部有信箱噢)
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getGreeting,getGreetings} from "../../api/greets.js";
	export default {
		data(){
			return {
				row: {
					id: 1,
					category_name: '生日祝福',
					hot_quantity: '3.4k',
					content: '今天，鲜花为你而开；今天，笑容格外灿烂；今天，亲朋祝愿不断；今天，我们相聚眼前。所有的不快都已离开，所有的惊喜连续不断；所有的幸福都会涌现。今天，是你的生日。我们祝愿你开心无限，幸福永远！'
				},
				greets: [],
				ending: false,
				page:0,
				category_id: 0,
			}
		},
		onLoad(options) 
		{
			this.category_id = options.id;
			getGreeting(options.id)
			.then(data => {
				this.row = data;
				this.category_id = data.category_id;
				this.search();
			})
			.catch(res=>{});
		},
		methods:{
			copy(content)
			{
				uni.setClipboardData({
					data: content,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none',
						})
					}
				})
			},
			search()
			{
				if (this.ending) {
					return false;
				}
				getGreetings({
					category_id: this.category_id,
					page: ++this.page,
				})
				.then(data => {
					this.page = data.current_page;
					this.greets = this.greets.concat(data.data);
					if(!data.data || !data.data.length){
						this.ending = true;
					}
				}).catch(res => {});
			},
		}
	}
</script>

<style lang="scss">
	.row-box{
		padding: 30rpx;
		.footer{
			padding-top: 30rpx;
		}
		.footer .botton{
			display: flex;
			flex-direction: row;
			background-color: $theme-color;
			border-radius: 25rpx;
			padding: 8rpx 20rpx;
			.title{
				font-size: 22rpx;
				padding-left: 4rpx;
				padding-bottom: 2rpx;
			}
		}
		.footer .share{
			background-color: #01CF97;
			border-radius: 25rpx;
		}
		.footer .copy{
			background-color: #F4615C;
		}
		.footer .lable {
			font-size: 24rpx;
		}
		.footer .lable .category {
			background-color: #F1F9FF;
			color: #00B0FF;
		}
		.footer .lable .quanity {
			background-color: #FFF6F5;
			color: #EC6965;
		}
	}
	.main{
		padding-top: 0 !important;
	}
	.list-box .item:first-child{
		padding-top: 20rpx;
		margin-top: 0;
	}
	.uni-button{
		display: inline-flex;
		padding: 0;
		margin: 0;
		border-radius: 0;
		background-color: transparent;
		line-height: normal;
	}
	.uni-button::after{
		border: none;
	}
	.greet-scroll-view{
		height: 100vh;
	}
</style>
